{% extends 'base.html' %}
{% block link %}
        <style>
    #fenye{
	float: right;
  margin: 0 50px 0 0;
}
    </style>
{% endblock %}
{% block body %}

    <div class="content">
        <!--添加机器弹窗-->
        <div class="modal fade bs-example-modal-lg" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">添加端口信息</h4>
                  <span style="color: red;margin-left: 40px;font-size: 13px">*添加后不能修改，只能删除哦！</span>
              </div>
              <div class="modal-body">
                <form class="form-horizontal" action="{% url 'editdev' %}" method="post" id="creategroup">{% csrf_token %}
                    <input class="form-control"  style="display: none;" name="id"  value="{{ dev.graphid }}" type="text" readonly/>
                    <div class="form-group">
                    <label class="col-lg-2 control-label" for="mark">端口:</label>
                        <div class="col-lg-9">

                            <select name="mark" class="form-control">
                                <option value="1">端口1</option>
                                <option value="2">端口2</option>
                                <option value="3">端口3</option>
                                <option value="4">端口4</option>
                                <option value="5">端口5</option>
                                <option value="6">端口6</option>
                                <option value="7">端口7</option>
                                <option value="8">端口8</option>
                                <option value="9">端口9</option>
                                <option value="10">端口10</option>
                                <option value="11">端口11</option>
                                <option value="12">端口12</option>
                                <option value="13">端口13</option>
                                <option value="14">端口14</option>
                                <option value="15">端口15</option>
                                <option value="16">端口16</option>
                                <option value="17">端口17</option>
                                <option value="18">端口18</option>
                                <option value="19">端口19</option>
                                <option value="20">端口20</option>
                                <option value="21">端口21</option>
                                <option value="22">端口22</option>
                                <option value="23">端口23</option>
                                <option value="24">端口24</option>
                                <option value="25">端口25</option>
                                <option value="26">端口26</option>
                                <option value="27">端口27</option>
                                <option value="28">端口28</option>
                                <option value="29">端口29</option>
                                <option value="30">端口30</option>
                                <option value="31">端口31</option>
                                <option value="32">端口32</option>
                                <option value="33">端口33</option>
                                <option value="34">端口34</option>
                                <option value="35">端口35</option>
                                <option value="36">端口36</option>
                                <option value="37">端口37</option>
                                <option value="38">端口38</option>
                                <option value="39">端口39</option>
                                <option value="40">端口40</option>
                                <option value="41">端口41</option>
                                <option value="42">端口42</option>
                                <option value="43">端口43</option>
                                <option value="44">端口44</option>
                                <option value="45">端口45</option>
                                <option value="46">端口46</option>
                                <option value="47">端口47</option>
                                <option value="48">端口48</option>
                                <option value="49">端口49</option>
                                <option value="50">端口50</option>
                                <option value="51">端口51</option>
                                <option value="52">端口52</option>
                                <option value="53">端口53</option>
                                <option value="54">端口54</option>
                                <option value="55">端口55</option>
                                <option value="56">端口56</option>
                                <option value="57">端口57</option>
                                <option value="58">端口58</option>
                                <option value="59">端口59</option>
                                <option value="60">端口60</option>
                                <option value="61">端口61</option>
                                <option value="62">端口62</option>
                                <option value="63">端口63</option>
                                <option value="64">端口64</option>
                                <option value="65">端口65</option>
                                <option value="66">端口66</option>
                                <option value="67">端口67</option>
                                <option value="68">端口68</option>
                                <option value="69">端口69</option>
                                <option value="70">端口70</option>
                                <option value="71">端口71</option>
                                <option value="72">端口72</option>
                                <option value="73">端口73</option>
                                <option value="74">端口74</option>
                                <option value="75">端口75</option>
                                <option value="76">端口76</option>
                                <option value="77">端口77</option>
                                <option value="78">端口78</option>
                                <option value="79">端口79</option>
                            </select>
                        </div>
                </div>
                    <div class="form-group">
                    <label class="col-lg-2 control-label" for="mess">信息:</label>
                        <div class="col-lg-9">
                            <input type="text" id="mess" class="form-control" name="mess" placeholder="请输入信息" />
                        </div>
                </div>
                    <div class="form-group">
                    <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="creategroup" class="btn btn-primary" value="submit">提交</button>
              </div>
              </div>
                </form>
              </div>

            </div>
        </div>
        </div>
        <!--弹窗结束-->
<div class="modal fade bs-example-modal-lg" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">添加端口信息</h4>
                  <span style="color: red;margin-left: 40px;font-size: 13px">*请先下载并编写模板！</span>
              </div>
              <div class="modal-body">
                  <a href="/download/" style="float: right" class="btn btn-default " ><span class="glyphicon glyphicon-cloud-download"></span> 模板下载 </a>
                <form class="form-horizontal" action="{% url 'register' %}" method="post" id="creategroup2" enctype="multipart/form-data">{% csrf_token %}
                    <input class="form-control"  style="display: none;" name="id"  value="{{ dev.graphid }}" type="text" readonly/>
                    {{uf.as_p}}
                    <div class="form-group">
                    <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="creategroup2" class="btn btn-primary" value="submit">提交</button>
              </div>
              </div>
                </form>
              </div>

            </div>
        </div>
        </div>
        <!--弹窗结束-->
    	<div class="row">
            <div class="col-lg-12">
                <div class="box">
                    <div class="box-header">
                      <h3 class="box-title" >编辑设备：<span style="color: red;">{{ dev.name }}</span></h3>
                        <a href="#" style="float: right;margin-left: 2px" class="btn btn-sm btn-danger " onclick="del_all('{{ dev.id }}');"><span class="glyphicon glyphicon-remove"></span> 删除所有 </a>
                        <a href="#myModal3" style="float: right;margin-left: 2px" class="btn btn-sm btn-success " data-toggle="modal" data-placement="bottom"><span class="glyphicon glyphicon-floppy-save"></span> 批量导入 </a>
                        <a href="#myModal2" style="float: right" class="btn btn-sm btn-primary " data-toggle="modal" data-placement="bottom"><span class="glyphicon-plus"></span> 添加信息 </a>
{#                        <a href="#" style="float: right;margin-right: 2px" class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span> 删除所有 </a>#}

                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                      <table id="example2" class="table table-bordered table-hover">
                        <thead>
                        <tr>
                          <th class="text-center">端口</th>
                          <th class="text-center">信息</th>
                          <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for topic in topics %}
                                <tr>
                                  <td class="text-center">{{ topic.mark }}</td>
                                  <td class="text-center">{{ topic.description }}</td>
                                  <td class="text-center">
{#                                          <button  type="button" class="btn btn-xs btn-info " onclick="edit_users('{{ topic.id }}')">编辑</button>#}
                                        <button  type="button" class="btn btn-xs btn-danger asset_del" onclick="del_users('{{ topic.id }}');" >删除</button>

                                  </td>
                                </tr>
                        {% endfor %}
                        </tbody>
                      </table>
                    </div>
                <!-- /.box-body -->
                </div>
            </div>
            <div id="fenye" class="pagination">
                    <nav>
                      <ul class="pagination">
                        {% if topics.has_previous %}
                            <li><a href="?id={{ dev.graphid }}&page={{ topics.previous_page_number }}">&laquo;</a></li>
                            {% else %}
                            <li class="disabled"><a href="#">&laquo;</a></li>
                          {% endif %}
                          {% for page_number in topics.paginator.page_range %}
                            {% ifequal page_number  topics.number %}
                                <li class="active"><a>{{ page_number }}</a></li>
                            {% else %}
                                <li><a href="?id={{ dev.graphid }}&page={{ page_number }}">{{ page_number }}</a></li>
                            {% endifequal %}
                          {% endfor %}
                        {% if topics.has_next %}
                            <li><a href="?id={{ dev.graphid }}&page={{ topics.next_page_number }}">&raquo;</a></li>
                            {% else %}
                            <li class="disabled"><a href="#">&raquo;</a></li>
                        {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
    </div>
{% endblock %}
{% block javascript %}
    <script type="text/javascript">
			$(document).ready(function(){
				$('#edit').addClass("active");
		});
    </script>
    <script>
		function del_users(id) {
            if(confirm("确认要删除此条信息？")){
                    $.ajax({
                        url:'{% url 'deldev' %}',
                        type:'POST',
                        data:{modify:id},
                        success:function (arg) {
                            window.location.reload();
                        },
                        error:function () {
                            console.log('failed');
                        }
                    });
                }
	};
    function del_all(id) {
            if(confirm("确认要删除此条信息？")){
                    $.ajax({
                        url:'{% url 'deldevall' %}',
                        type:'POST',
                        data:{modify:id},
                        success:function (arg) {
                            window.location.reload();
                        },
                        error:function () {
                            console.log('failed');
                        }
                    });
                }
	};
	</script>
{% endblock %}
